<template>
  <div class="content">
    <a href="/pages/open-shop/store-login/main" class="setUpShop">我要开店</a>
    <p class="title">欢迎登陆爱卡卡开店宝</p>
    <div class="form-wrap">
      <div class="input">
        <input
          v-model="form.username"
          class="loginInput"
          type="number"
          placeholder="请输入手机号码"
          placeholder-class="placeholder-part"
          maxlength="11"
          @change="userNameChange"
        />
        <input
          v-model="form.password"
          class="loginInput"
          type="text"
          password
          placeholder="请输入密码"
          placeholder-class="placeholder-part"
          @change="passwordChange"
        />
      </div>
      <div class="findPas">
        <img :src="themeImg" mode="widthFix" class="icon" />
        <a href="/pages/login/forget/main" class="forget">找回密码</a>
      </div>
      <div v-if="needAdminId" class="input-field2">
        <span class="label">店铺</span>
        <picker
          class="filter-picker"
          :range="adminList"
          range-key="shopName"
          @change="handleStateChange"
        >
          <span>{{changeName}}</span>
        </picker>

        <!-- <select v-model="loginAdminId">
          <option
            v-for="(item,idx) in adminList"
            :key="idx"
            :value="item.adminId"
          >{{item.shopName}}</option>
        </select>-->
      </div>
      <button class="btn-color-blue loginBtn" @click="handleLogin">登录</button>

      <img
        src="https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/dibiantuan@2x.png"
        mode="widthFix"
        class="bg"
      />
    </div>
  </div>
</template>

<script>
import { encryptMD5, setToken, openShopAction, getToken } from '@/utils'
import {
  // LOGIN_BY_ACCOUNT_FIRST,
  // LOGIN_BY_ACCOUNT_NEXT,
  FIND_SHOP_BASE_INFO,
  ADMIN_LOGIN,
  CHECK_ADMIN
} from '@/api'

export default {
  components: {},
  props: {},
  data () {
    return {
      form: {
        username: '',
        password: ''
      },
      adminList: [],
      needAdminId: false,
      loginAdminId: null,
      changeName: '请选择店铺登录'
    }
  },
  computed: {
    themeImg () {
      let appId = this.$store.state.appId
      if (appId !== 'wx657f1b2fb50b5be3') {
        return 'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/icon/question_mark_purple.png'
      } else {
        return 'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/icon/question_mark_purple2.png'
      }
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    this.init()
    this.autoLogin()
    // this.form.username = this.$store.state.username
    // this.form.password = ''
  },
  methods: {
    userNameChange (e) {
      this.form.username = e.target.value
    },
    passwordChange (e) {
      this.form.password = e.target.value
    },
    handleLogin () {
      if (!this.form.username) {
        this.$toast('请输入手机号')
      } else if (!/^1[3456789]\d{9}$/.test(this.form.username)) {
        this.$toast('手机号码格式错误')
      } else if (!this.form.password) {
        this.$toast('请输入登录密码')
      } else {
        // this.loginAccount1st()

        if (this.needAdminId) {
          if (!this.loginAdminId) {
            this.$toast('请选择登录的店铺')
          } else {
            this.login2nd()
          }
        } else {
          this.login1st()
        }
      }
    },
    /* loginAccount1st () {
      const vm = this

      let params = {
        username: vm.form.username,
        password: encryptMD5(vm.form.password)
      }

      LOGIN_BY_ACCOUNT_FIRST(params)
        .then(r => {
          if (r.data.code === '0') {
            if (r.data.data.constructor === Array) {
              vm.loginAccount2nd(r.data.data[0].providerId)
            } else {
              vm.loginSuccess(r.data.data)
            }
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    loginAccount2nd (providerId) {
      const vm = this

      let params = {
        providerId,
        username: vm.form.username,
        password: encryptMD5(vm.form.password)
      }

      LOGIN_BY_ACCOUNT_NEXT(params)
        .then(r => {
          if (r.data.code === '0') {
            vm.loginSuccess(r.data.data)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }, */
    loginSuccess (accountInfo) {
      let loginState = this.$cookie.get('loginState')
      delete accountInfo.password

      this.$store.commit('SET_ACCOUNT_INFO', accountInfo)
      setToken(accountInfo.providerId)

      if (loginState) {
        this.$router.switch('/pages/home/index/main')
      } else {
        this.$router.push('/pages/home/guidance/main')
      }
    },
    test () {
      openShopAction('263348002406531072')
    },
    handleStateChange (e) {
      const vm = this
      let value = Number(e.target.value)
      for (let i = 0; i < vm.adminList.length; i++) {
        if (i === value) {
          vm.changeName = vm.adminList[i].shopName

          vm.loginAdminId = vm.adminList[i].adminId
          vm.login2nd()
          return false
        }
      }
    },

    login1st () {
      const vm = this

      CHECK_ADMIN(vm.form.username)
        .then(r => {
          if (r.data.code === '0') {
            let shopList = []
            if (r.data.data.constructor === Array) {
              shopList.push(...r.data.data)
            } else if (r.data.data.constructor === Object && r.data.data) {
              shopList.push(r.data.data)
            }

            if (shopList.length) {
              if (shopList.length > 1) {
                vm.adminList = shopList
                vm.needAdminId = true
              } else {
                vm.loginAdminId = shopList[0].adminId
                vm.login2nd()
              }
            } else {
              vm.$toast('未找到该用户')
            }
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    login2nd () {
      const vm = this

      let params = {
        adminId: vm.loginAdminId,
        password: encryptMD5(vm.form.password)
      }

      ADMIN_LOGIN(params)
        .then(r => {
          if (r.data.code === '0') {
            let myCookie = r.header['Set-Cookie']
            vm.$cookie.set('my-cookie', myCookie)
            vm.$cookie.set('new-admin-info', r.data.data)
            vm.loginSucceed(r.data.data)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    loginSucceed (data) {
      const vm = this

      FIND_SHOP_BASE_INFO(data.shopId)
        .then(r => {
          if (r.data.code === '0') {
            vm.loginSuccess(r.data.data)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    init () {
      const vm = this
      vm.form = {
        username: '',
        password: ''
      }
      vm.adminList = []
      vm.needAdminId = false
      vm.loginAdminId = null
      vm.changeName = '请选择店铺登录'
    },
    autoLogin () {
      this.$cookie.remove('store-mobile')
      if (getToken()) {
        this.$store.commit('SET_ACCOUNT_INFO', this.$cookie.get('account'))
        this.$router.switch('/pages/home/index/main')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';
.content {
  .setUpShop {
    font-size: 16px;
    color: #626efd;
    width: 90%;
    margin: auto;
    display: flex;
    justify-content: flex-end;
    margin: 5px 0 20px;
  }
  .title {
    font-size: 16px;
    font-weight: 600;
    color: #000;
    width: 85%;
    margin: 0px auto 40px;
  }
  .form-wrap {
    display: inline-block;
    .input {
      width: 90%;
      margin: 30px auto 0;
      > .loginInput {
        font-size: 14px;
        color: #999999;
        border-bottom: 1px solid #e8e8e8;
        padding-right: 3px;
        margin-top: 30px;
        height: 40px;
      }
      > .forget {
        color: $blue;
        font-size: 14px;
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
    .input-field2 {
      position: relative;
      border-bottom: 1px solid $light-gray;
      padding: 10px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 15px;
      width: 90%;
      margin: auto;
    }
  }
  .findPas {
    width: 90%;
    margin: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 14px;
    color: #808080;
    margin: 15px 0;
    .icon {
      width: 20px;
      height: 20px;
      margin-right: 5px;
    }
  }
  .loginBtn {
    border-radius: 25px;
    line-height: 40px;
    margin-top: 30px;
  }
  .bg {
    width: 100%;
    height: 156px;
    position: fixed;
    bottom: 0px;
    left: 0px;
  }
}
</style>
